<template>
    <div class="mine-info-root">
        <el-breadcrumb style="margin-bottom: 10px;" separator="/">
            <el-breadcrumb-item>我的</el-breadcrumb-item>
            <el-breadcrumb-item>我的帖子</el-breadcrumb-item>
        </el-breadcrumb>
        <div style="text-align: right;">
            <el-button type="primary" @click="showPostModal">发布帖子</el-button>
        </div>

        <el-table :data="tableData" style="width: 100%; max-height: 500px;min-height: 400px">
            <el-table-column
                prop="id"
                label="id"
                width="180">
            </el-table-column>
            <el-table-column
                prop="title"
                label="标题"
                width="180">
            </el-table-column>
            <el-table-column
                prop="content"
                label="内容">
            </el-table-column>
            <el-table-column
                prop="created_at"
                label="创建时间">
            </el-table-column>
            <el-table-column
                prop="start"
                label="点赞数量">
            </el-table-column>
            <el-table-column
                prop="address"
                label="操作">
                <template slot-scope="scope">
                    <el-button
                        @click="editProduct(scope.row)"
                        type="primary"
                        size="small"
                    >
                        编辑
                    </el-button>
                    <el-button
                        @click="delProduct(scope.row.id)"
                        type="danger"
                        size="small"
                    >
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <div style="text-align: right; margin: 20px">
            <el-pagination
                layout="prev, pager, next"
                @current-change="getList"
                :total="this.total"
            >
            </el-pagination>
        </div>
        <el-dialog :title="addInfo.id ? '修改帖子' : '发布帖子'" :visible.sync="addModalShow" width="30%" >
            <el-form ref="addFormRef" label-width="80px">
                <el-form-item label="名称">
                    <el-input
                        placeholder="请输入发布帖子的名称"
                        v-model="addInfo.title"
                    ></el-input>
                </el-form-item>
                <el-form-item label="内容">
                    <el-input
                        placeholder="请输入帖子内容"
                        v-model="addInfo.content"
                    ></el-input>
                </el-form-item>
                
            </el-form>
			<div slot="footer">
				<el-button type="primary" @click="addPosts">{{addInfo.id ? '修改' : '增加'}}</el-button>
			</div>
        </el-dialog>
    </div>
</template>

<script>
import {getPosts, addPosts, editPosts, delPosts, serviceRequest} from "network/request.js";
export default {
    data() {
        return {
            tableData: [],
            addModalShow: false,
            addInfo: {
                title:  '',
                content: '',
                id: '',
            },
            offset: 0,
            total: 0,
        };
    },
    computed: {
    },
    mounted() {
    },
    created() {
        this.getList();
    },
    methods: {
        showPostModal() {
            this.addModalShow = true;
        },
        getList(page) {
            if ('number' === typeof page) {
                this.offset  = 10 * (page - 1);
            } else {
                this.offset = 0;
            }
            const params = {
                url: '/user/post/getbyuser',
                method: 'get',
                data: {
                    offset: this.offset,
                }
            }
            serviceRequest(params).then(res => {
                this.tableData = res.data.content.data;
                this.total = res.data.content.total;
            });
        },
        addProductDilaog() {
            this.addModalShow = true;
            this.addInfo = {
                title:  '',
                content: '',
                id: '',
            };
        },
        addPosts() {
            const params = {
                id: this.addInfo.id,
                data: {
                    ...this.addInfo,
                }
            };
            if (params.id) {
                editPosts(params).then((res) => {
                    this.$message.success(res.data.content);
                    this.addModalShow = false;
                    this.getList();
                });
            } else {
                addPosts(this.addInfo).then((res) => {
                    this.$message.success(res.data.content);
                    this.addModalShow = false;
                    this.getList();
                });
            }
            
        },
        delProduct(id) {
            this.$confirm(`删除后不可恢复，是否确定`, "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
            .then(() => {
                const params = {
                    ids: [id],
                };
                delPosts(params).then(() => {
                    this.$message.success("删除成功! ");
                    this.getList();
                });
            })
            .catch(() => {});
        },
        editProduct(info) {
            this.addInfo = {
                title:  info.title,
                content: info.content,
                id: info.id,
            };
            this.addModalShow = true;
        },
    },
};
</script>

<style lang="scss" scoped>
.mine-info-root {
    padding: 0 20px;
    background-color: #fff;
    margin-top: 50px;
}
</style>